<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      .father {
          margin: 60px;
          display: grid;
          grid-template-columns: repeat(auto-fill,200px);
          grid-template-rows: 200px;
          grid-gap: 20px;
      }
      .son {
          background-color: red;
          width: 200px;
          height: 200px;
      }
      .son:nth-child(2n) {
          background-color: #a5e5ff;
      }
  </style>
</head>
<body>
<div class="father">
  <div class="son">1</div>
  <div class="son">2</div>
  <div class="son">3</div>
  <div class="son">4</div>
  <div class="son">5</div>
  <div class="son">6</div>
  <div class="son">7</div>
  <div class="son">8</div>
</div>
</body>
</html>